import React, { Component } from 'react';
import Str from './viwe/Str';
import Bool from './viwe/Bool';
import Arr from './viwe/Arr';
import Num from './viwe/Num';
import Obj from './viwe/Obj';
import Time from './viwe/Time';
import Verification from './viwe/Verification';
import Shopping from './viwe/Shopping';
import City from './viwe/City';
import Menu from './viwe/Menu';
import Detali from './viwe/Detali';
import ShoppingCar from './viwe/ShoppingCar';
import User from './viwe/User';
import ShowDialog from './viwe/ShowDialog';
import ReactComponent from './viwe/ReactComponent';


export default class App extends Component {
  //给创建的App组件添加属性用constructor(){}
  constructor () {
    //强化this指向问题，避免this指向出错
    super();
    this.state = {
      activeIndex: 15,
      com: ReactComponent,
      menu: [
        { id: 1, msg: '数字', com: Num },
        { id: 2, msg: '字符', com: Str },
        { id: 3, msg: '布尔', com: Bool },
        { id: 4, msg: '数组', com: Arr },
        { id: 5, msg: '对象', com: Obj },
        { id: 6, msg: '时间', com: Time },
        { id: 7, msg: '验证', com: Verification },
        { id: 8, msg: '购物', com: Shopping },
        { id: 9, msg: '城市', com: City },
        { id: 10, msg: '菜单', com: Menu },
        { id: 11, msg: '商品', com: Detali },
        { id: 12, msg: '购物分离', com: ShoppingCar },
        { id: 13, msg: '编辑', com: User },
        { id: 14, msg: '弹窗', com: ShowDialog },
        { id: 15, msg: 'react组件', com: ReactComponent },
      ]
    }
  }
  change(item) {
    this.setState({
      com: item.com,
      activeIndex: item.id
    })
  }
  render() {
    let RouterView = this.state.com
    let activeIndex = this.state.activeIndex
    return (
      <>
        <div className='menu'>
          {this.state.menu.map(item => (
            <div
              className={(activeIndex === item.id ? "active" : "") + " item"}
              key={item.id}
              onClick={() => {
                this.change(item);
              }}
            >
              {item.msg}
            </div>
          ))}
        </div>
        <RouterView></RouterView>
      </ >
    )
  }
}
